<template>
	<view class="item-box">
		<view class="item-box-img">
			<image :src=" 'https://picsum.photos/450/450?random=' + Math.ceil(Math.random() * 50)" mode="aspectFill">
			</image>
		</view>
		<view class="item-box-name">
			{{item.name}}
		</view>

		<view class="item-comment">
			{{'0'|filterComment}}条评论 月销量 {{'0'|filterComment}}
		</view>
		<view class="item-box-price">
			<text>￥</text>
			<text>{{'0'|filterPrice}}</text>
		</view>
		<view class="grid-store">
			<image :src=" 'https://picsum.photos/450/450?random=' + Math.ceil(Math.random() * 50)" mode="aspectFill">
			</image>
			<text class="grid-store-name"> {{item.storeName}} </text>
			<text>进店 > </text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item'],
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.item-box {
		width: 46.5%;
		display: inline-block;
		margin-left: 2%;
		border: 1px solid #f1f1f1;
		margin-bottom: 15rpx;
		border-radius: 15rpx;
		overflow: hidden;

		.grid-store {
			width: 100%;
			margin-top: 15rpx;
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			image {
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
			}

			.grid-store-name {
				font-size: 26rpx;
				font-weight: 400;
				max-width: 180rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				word-break: break-all;
				word-wrap: break-word;
				white-space: normal;
				word-break: break-word;
				color: #999;
				margin-left: 10rpx;
			}

			text:last-child {
				font-size: 26rpx;
				color: #333;
				margin-left: 10rpx;
				text-decoration: underline;
			}



		}

		.item-comment {
			width: 100%;
			margin-top: 15rpx;
			color: #666;
			font-size: 26rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
		}

		.item-box-price {
			width: 100%;
			margin-top: 15rpx;
			padding: 0 10rpx;
			box-sizing: border-box;

			text:first-child {
				font-size: 26rpx;
				font-weight: 400;
				color: orangered;
			}

			text:last-child {
				font-size: 36rpx;
				color: orangered;
				font-weight: 600;
			}
		}

		.item-box-name {
			width: 100%;
			margin-top: 15rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			font-weight: 500;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			word-break: break-all;
			word-wrap: break-word;
			white-space: normal;
			word-break: break-word;
		}

		.item-box-img {
			width: 100%;
			height: 400rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>